html,body,div,img,ul,li,a{margin: 0;padding: 0;border: none;outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul{list-style: none;}
a{text-decoration: none;cursor: pointer;color: #333;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:hover,a:focus,a:visited{outline: none;text-decoration: none;}
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
@font-face {font-family:'HelveticaNeue-Bold';src: local('HelveticaNeue-Bold'), local('HelveticaNeue-Bold'), url('../font_aws/HelveticaNeue-Bold.otf')format('otf'), url('../font_aws/HelveticaNeue-chinese.ttf')format('truetype');
}
html,body{width: 100%;height: 100%;overflow: hidden;}
html{background-color: #f5f5f5;font-family:'HelveticaNeue-Bold';}
body{position:relative;max-width: 640px;min-width: 320px;overflow: auto;margin: 0 auto;box-shadow: 0 0 10px 0 rgba(0,0,0,.2);-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);  -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);  -o-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);}
@media screen and (min-width:789px) {
    body{max-height: 1024px;}
    #popButton{height: 100px}
}
.main{width: 100%;height: 100%;overflow: hidden;position: relative;}
#loading,#popping,#popping_1{position: absolute;top:0;left:0; bottom:0;right:0;z-index:100;text-align: center;}
#loading{background:#f18902;}
#popping,#popping_1{background: rgba(0,0,0,0.7);padding: 3% 10%;display: none;overflow: hidden;}
#popping{padding: 8% 5%;}
#pop_1{width: 100%;height: 100%;background-repeat: no-repeat;background-size: contain;background-image:url(../image_aws/pop/pop_1.png);}
#pop{width:90%;height:90%;position:absolute;top:50%;left:50%;background-image:url(../image_aws/pop/pop_1.png) ;
    background-position:center center;background-repeat: no-repeat;background-size: contain;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
#popButton{display:block;width:55%;cursor: pointer;margin: 0 auto;left: 50%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
#popClose{position: absolute;right:1%;top:1%;width: 18%;height: 10%;cursor: pointer;}

.load-1,.load-2,.load-fade img,.loading3,#popButton,.title>img,#qi{position: absolute;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%); }
.load-1{left: 54%;top:9%;width: 30%}
.load-2{bottom:5%;left: 50%; width: 16%;}
.load-fade{top: 20%;width: 100%;}
.load-fade>img{left: 54%;opacity: 0.5;}
.load-fade>img:nth-child(1){width: 60%;}
.load-fade>img:nth-child(2){top: -20px;left:45%;width: 30%}
.load-fade>img:nth-child(3){top: 40px;left: 49%;width: 30%}
.loading3 {
    font-family:'微软雅黑';
    font-size:1.1rem;
    font-weight: 400;
    line-height:90px;
    text-align:center;
    width:100px;
    left: 50%;
    bottom: 16%;
    color:#fff;
    height: 60px;
    background:url(../image_aws/loading.gif) no-repeat center center/contain;
    text-indent: -23px;
}


@media screen and (max-width:480px) {
    .loading3{width: 60px;font-size:0.8rem;height: 60px;  line-height:60px;}

}

.bg,.bg img,.slide-right,.slide-content,.slide-mask,.load-fade{position: absolute;}
.bg{height: 100%;top: 50%;}

.bg,.slide-content p{left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);}
.bg #background{height: 100%;position: static;}
.slide-mask{top:0;left:0;bottom:0;right:0;background-color: rgba(0,0,0,0.5);display: none;z-index: 5;}
.slide-right{right: 10px;top:10px;  z-index: 10;}
.slide-right li{cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.slide-right li>img{width: 30px; }
.slide-right li:first-child{margin-bottom: 10px; }
.slide-content{z-index: 10;width: 60%;max-width: 300px;min-width: 150px;height: 100%;right:-50%;top:0;background: #fff url(../image_aws/slide_bg.png) no-repeat center center/contain;box-shadow: 0 0 20px 0 rgba(0,0,0,.8);-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.8);  -moz-box-shadow: 0 0 20px 0 rgba(0,0,0,.8);  -o-box-shadow: 0 0 20px 0 rgba(0,0,0,.8);}
.slide-content li{-webkit-tap-highlight-color:rgba(0,0,0,0);width: 100%;height: 12.5%;position: relative;box-sizing: border-box; font-weight:400;cursor: pointer; }
.slide-content li.active{background: url(../image_aws/slide_li.png) no-repeat center/contain;}
.slide-content li.active p{color: #fff;}
.slide-content p{font-family:'HelveticaNeue-Bold'; width: 100%;  text-align: center;display: block;position:absolute;font-size: 1rem;top: 50%;cursor: pointer; }
.car img{border: none; background-repeat:no-repeat; background-size:contain;background-position: 0 0;  }
.title,.title1,.title2{cursor: pointer;}
#qi{position: fixed;left:50.6%;top:6%;width: 30%;max-width: 230px;}

/*定位图标 抖动*/
.bg .title{width: 50px;position: absolute;}
.bg .title .dot-img{width: 100%;padding-bottom:152%;position: absolute;top: 0;left: 0;}
.bg .title .dot-img>img{position:relative;width: 100%;}
.bg .title .dot-img>div{position: absolute;bottom: 35%;left:-50%;width: 200%;padding-bottom:100%; background-color: #f88803; border-radius: 100%; }

/* css3 keyframes - animation 3 */


/*base code*/
.animated {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: forwards;
    /*animation-iteration-count: infinite;*/

    animation-timing-function:linear;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.six {
    -webkit-animation-iteration-count: 6;
    animation-iteration-count: 6;
}

.animated.hinge_1 {  -webkit-animation-duration: 0.3s;  animation-duration: 0.3s;  }
.animated.hinge_2 {  -webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  }
.animated.hinge_3 {  -webkit-animation-duration: 2.5s;  animation-duration: 2.5s;  }
.animated.hinge_4 {  -webkit-animation-duration: 4.5s;  animation-duration: 4.5s;  }
.animated.hinge_5 {  -webkit-animation-duration: 6s;  animation-duration: 6s;  }
.animated.hinge_15 {  -webkit-animation-duration: 15s;  animation-duration: 15s;  }
.animated.hinge_25 {  -webkit-animation-duration: 25s;  animation-duration: 25s;  }
.animated.hinge_30 {  -webkit-animation-duration: 30s;  animation-duration: 30s;  }
.animated.hinge_60 {  -webkit-animation-duration: 60s;  animation-duration: 60s;  }
.animated.hinge_80 {  -webkit-animation-duration: 80s;  animation-duration: 80s;  }
.animated.hinge_85 {  -webkit-animation-duration: 85s;  animation-duration: 85s;  }
.animated.hinge_90 {  -webkit-animation-duration: 90s;  animation-duration: 90s;  }

/*波纹*/
.dot {
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}
.dot1 {
    -webkit-animation: scaleout 2s infinite ease-in-out;
    animation: scaleout 2s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(0.0) ;  opacity: 1;}
    100% {
        -webkit-transform: scale(1.0);
        opacity: .2;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
        opacity: 1;
    } 100% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
          opacity: .2;
      }
}
/*旋转*/
@-webkit-keyframes anim3 {
    from { -webkit-transform:rotateY(0deg); }
    50% { -webkit-transform:rotateY(180deg); }
    to { -webkit-transform:rotateY(360deg); }
}
@-moz-keyframes anim3 {
    from { -moz-transform:rotateY(0deg); }
    50% { -moz-transform:rotateY(180deg); }
    to { -moz-transform:rotateY(360deg); }
}
@-ms-keyframes anim3 {
    from { -ms-transform:rotateY(0deg); }
    50% { -ms-transform:rotateY(180deg); }
    to { -ms-transform:rotateY(360deg); }
}
@-o-keyframes anim3 {
    from { -o-transform:rotateY(0deg); }
    50% { -o-transform:rotateY(180deg); }
    to { -o-transform:rotateY(360deg); }
}
@keyframes anim3 {
    from { transform:rotateY(0deg); }
    50% { transform:rotateY(180deg); }
    to { transform:rotateY(360deg); }
}


/*title抖动*/
@-webkit-keyframes bounce {
    0%, 100%, 20%, 53%, 80% {  -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);  transition-timing-function: cubic-bezier(0.215, .61, .355, 1);  -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0)  }
    40%, 43% {  -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0)  }
    70% {  -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  -webkit-transform: translate3d(0, -4px, 0);   transform: translate3d(0, -4px, 0)  }
    90% {  -webkit-transform: translate3d(0, -2px, 0);  transform: translate3d(0, -2px, 0)  }
}
@keyframes bounce {
    0%, 100%, 20%, 53%, 80% {  -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);  transition-timing-function: cubic-bezier(0.215, .61, .355, 1);  -webkit-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0)  }
    40%, 43% {  -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  -webkit-transform: translate3d(0, -8px, 0);  -ms-transform: translate3d(0, -8px, 0);  transform: translate3d(0, -8px, 0)  }
    70% {  -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  transition-timing-function: cubic-bezier(0.755, .050, .855, .060);  -webkit-transform: translate3d(0, -4px, 0);  -ms-transform: translate3d(0, -4px, 0);  transform: translate3d(0, -4px, 0)  }
    90% {  -webkit-transform: translate3d(0, -2px, 0);  -ms-transform: translate3d(0, -2px, 0);  transform: translate3d(0, -2px, 0)  }
}
.bounce{-webkit-animation-name: bounce;  animation-name: bounce;  -webkit-transform-origin: center bottom;  -ms-transform-origin: center bottom;  transform-origin: center bottom }
/*向左向右滑动*/
@-webkit-keyframes slideInLeft {
    0% ,100%{  -webkit-transform: translate(0, 0);  transform: translate(0, 0);   }
    50%{  -webkit-transform: translate(1680%, 0);  transform: translate(1680%, 0)  }
}
@keyframes slideInLeft {
    0%,100% {  -webkit-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);   }
    50% {  -webkit-transform: translate(1680%, 0);  -ms-transform: translate(1680%, 0);  transform: translate(1680%, 0)  }
}
.slideInLeft {  -webkit-animation-name: slideInLeft;  animation-name: slideInLeft  }
@-webkit-keyframes slideInRight {
    0% ,100%{  -webkit-transform: translate(0, 0);  transform: translate(0, 0);   }
    50% {  -webkit-transform: translate(-1680%, 0);  transform: translate(-1680%, 0)  }
}
@keyframes slideInRight {
    0% ,100% {  -webkit-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);  }
    50% {  -webkit-transform: translate(-1680%, 0);  -ms-transform: translate(-1680%, 0);  transform: translate(-1680%, 0)  }
}
.slideInRight {  -webkit-animation-name: slideInRight;  animation-name: slideInRight  }
@-webkit-keyframes slideInToggle {
    0% ,100%{  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);   }
    25% {  -webkit-transform: translate3d(840%, 0, 0);  transform: translate3d(840%, 0, 0)  }
    75% { -webkit-transform: translate3d(-840%, 0, 0);  transform: translate3d(-840%, 0, 0)  }

}
@keyframes slideInToggle {
    0%,100%{    -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);  }
    25% {  -webkit-transform: translate3d(840%, 0, 0);  transform: translate3d(840%, 0, 0) ;-ms-transform: translate3d(840%, 0, 0) }
    75% { -webkit-transform: translate3d(-840%, 0, 0);  transform: translate3d(-840%, 0, 0) ;-ms-transform: translate3d(-840%, 0, 0)  }
}
.slideInToggle {  -webkit-animation-name: slideInToggle;  animation-name: slideInToggle;  }


/*车辆形式，围绕一圈运动*/
@-webkit-keyframes slideCar_1 {
    0%,100% {background-image: url(../image_aws/car/car_black_1.png);
        -webkit-transform: translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);
    }
    24%{ background-image: url(../image_aws/car/car_black_1.png);}
    25% { background-image: url(../image_aws/car/car_black_4.png);
        -webkit-transform: translate3d(-845%,845%,0);  transform: translate3d(-845%,845%,0) ;  }
    49%{background-image: url(../image_aws/car/car_black_4.png);}
    50% {background-image: url(../image_aws/car/car_black_2.png);
        -webkit-transform:translate3d(100%,1780%,0);  transform: translate3d(100%,1780%,0) ; }
    74%{background-image: url(../image_aws/car/car_black_2.png);}
    75% {background-image: url(../image_aws/car/car_black_3.png);
        -webkit-transform: translate3d(1000%,900%,0);    transform: translate3d(1000%,900%,0) ; }
    99%{background-image: url(../image_aws/car/car_black_3.png);}
}
@keyframes slideCar_1 {
    0%,100% {background-image: url(../image_aws/car/car_black_1.png);
        -webkit-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);   }
    24%{background-image: url(../image_aws/car/car_black_1.png);}
    25% { background-image: url(../image_aws/car/car_black_4.png);
        -webkit-transform: translate3d(-845%,845%,0);  -ms-transform: translate3d(-845%,845%,0);  transform: translate3d(-845%,845%,0) ; }
    49%{background-image: url(../image_aws/car/car_black_4.png);}
    50% { background-image: url(../image_aws/car/car_black_2.png);
        -webkit-transform: translate3d(100%,1780%,0);  -ms-transform: translate3d(100%,1780%,0);  transform: translate3d(100%,1780%,0) ; }
    74%{background-image: url(../image_aws/car/car_black_2.png);}
    75% {background-image: url(../image_aws/car/car_black_3.png);
        -webkit-transform: translate3d(1000%,900%,0);  -ms-transform: translate3d(1000%,900%,0);  transform: translate3d(1000%,900%,0) ; }
    99%{background-image: url(../image_aws/car/car_black_3.png);}
}
.slideCar_1 {  -webkit-animation-name: slideCar_1;  animation-name: slideCar_1  }

@-webkit-keyframes slideCar_2 {
    0%,100% { background-image: url(../image_aws/car/car_blue_1.png);
        -webkit-transform: translate3d(0, 0, 0); transform:translate3d(0, 0, 0);   }
    24%{background-image: url(../image_aws/car/car_blue_1.png);}
    25% { background-image: url(../image_aws/car/car_blue_4.png);
        -webkit-transform: translate3d(-480%,300%,0);   transform: translate3d(-480%,300%,0) ; }
    49%{background-image: url(../image_aws/car/car_blue_4.png);}
    50% {background-image: url(../image_aws/car/car_blue_2.png);
        -webkit-transform: translate3d(650%,996%,0);   transform: translate3d(650%,996%,0) ; }
    74%{background-image: url(../image_aws/car/car_blue_2.png);}
    75% {background-image: url(../image_aws/car/car_blue_3.png);
        -webkit-transform: translate3d(1225%,676%,0);  transform: translate3d(1225%,676%,0) ; }
    99%{background-image: url(../image_aws/car/car_blue_3.png);}
}
@keyframes slideCar_2 {
    0%,100% {background-image: url(../image_aws/car/car_blue_1.png);
        -webkit-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);   }
    24%{background-image: url(../image_aws/car/car_blue_1.png);}
    25% { background-image: url(../image_aws/car/car_blue_4.png);
        -webkit-transform: translate3d(-460%,300%,0);  -ms-transform: translate3d(-460%,300%,0);  transform: translate3d(-460%,300%,0) ; }
    49%{background-image: url(../image_aws/car/car_blue_4.png);}
    50% {background-image: url(../image_aws/car/car_blue_2.png);
        -webkit-transform: translate3d(650%,996%,0);  -ms-transform: translate3d(650%,996%,0);  transform: translate3d(650%,996%,0) ; }
    74%{background-image: url(../image_aws/car/car_blue_2.png);}
    75% { background-image: url(../image_aws/car/car_blue_3.png);
        -webkit-transform: translate3d(1225%,676%,0);  -ms-transform: translate3d(1225%,676%,0);  transform: translate3d(1225%,676%,0) ; }
    99%{background-image: url(../image_aws/car/car_blue_3.png);}
}
.slideCar_2 {  -webkit-animation-name: slideCar_2;  animation-name: slideCar_2  }
@-webkit-keyframes slideCar_3 {
    0%,100% { background-image: url(../image_aws/car/car_red_1.png);
        -webkit-transform: translate3d(0, 0, 0);   transform:translate3d(0, 0, 0);   }
    24%{background-image: url(../image_aws/car/car_red_1.png);}
    25% {background-image: url(../image_aws/car/car_red_4.png);
        -webkit-transform: translate3d(-654%,300%,0);   transform: translate3d(-654%,416%,0) ; }
    49%{background-image: url(../image_aws/car/car_red_4.png);}
    50% {background-image: url(../image_aws/car/car_red_2.png);
        -webkit-transform:  translate3d(480%,1020%,0) ;    transform:  translate3d(480%,1020%,0)  ; }
    74%{background-image: url(../image_aws/car/car_red_2.png);}
    75% {background-image: url(../image_aws/car/car_red_3.png);
        -webkit-transform: translate3d(1120%,670%,0);  transform: translate3d(1120%,670%,0) ; }
    99%{background-image: url(../image_aws/car/car_red_3.png);}
}
@keyframes slideCar_3 {
    0%,100% { background-image: url(../image_aws/car/car_red_1.png);
        -webkit-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  transform:translate3d(0, 0, 0);   }
    24%{background-image: url(../image_aws/car/car_red_1.png);}
    25% {background-image: url(../image_aws/car/car_red_4.png);
        -webkit-transform: translate3d(-654%,300%,0);  -ms-transform: translate3d(-654%,416%,0);  transform: translate3d(-654%,416%,0) ; }
    49%{background-image: url(../image_aws/car/car_red_4.png);}
    50% {background-image: url(../image_aws/car/car_red_2.png);
        -webkit-transform: translate3d(480%,1020%,0) ;  -ms-transform:  translate3d(480%,1020%,0) ;  transform: translate3d(480%,1020%,0) ; }
    74%{background-image: url(../image_aws/car/car_red_2.png);}
    75% {background-image: url(../image_aws/car/car_red_3.png);
        -webkit-transform: translate3d(1120%,670%,0);  -ms-transform: translate3d(1120%,670%,0);  transform: translate3d(1120%,670%,0) ; }
    99%{background-image: url(../image_aws/car/car_red_3.png);}
}
.slideCar_3 {  -webkit-animation-name: slideCar_3;  animation-name: slideCar_3 ;}


/*飘动，掉头*/
@-webkit-keyframes slideCarDown_1 {
    0%,100% {background-image: url("../image_aws/qi_1.png") ; -webkit-transform: translate(0, 0);  transform: translate(0, 0);     }
    48%{background-image: url("../image_aws/qi_1.png") ; }
    50% { background-image: url("../image_aws/qi_2.png") ; -webkit-transform: translate(980%, 0);  transform: translate(980%, 0)  }
    98% { background-image: url("../image_aws/qi_2.png") ; }
}
@keyframes slideCarDown_1 {
    0%,100% {background-image: url("../image_aws/qi_1.png") ;  -webkit-transform: translate(0, 0);  -ms-transform: translate(0, 0);  transform: translate(0, 0);      }
    48%{background-image: url("../image_aws/qi_1.png") ; }
    50% { background-image: url("../image_aws/qi_2.png") ;  -webkit-transform: translate(980%, 0);  -ms-transform: translate(980%, 0);  transform: translate(980%, 0)  }
    98% { background-image: url("../image_aws/qi_2.png") ; }
}
.slideCarDown_1 {  -webkit-animation-name: slideCarDown_1;  animation-name: slideCarDown_1 ;border: none; background-repeat:no-repeat;background-size: contain; }
/*光束，聚光灯*/
@-webkit-keyframes swing_1 {
    0%,50%,100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        opacity: 1;
    }
    25% {
        -webkit-transform: rotate3d(0, 0, 1, 30deg);
        transform: rotate3d(0, 0, 1, 30deg);
        opacity: 0.5;

    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0.5;
    }
}
@keyframes swing_1 {
    0%,50%,100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        opacity: 1;
    }
    25% {
        -webkit-transform: rotate3d(0, 0, 1, 30deg);
        -ms-transform: rotate3d(0, 0, 1, 30deg);
        transform: rotate3d(0, 0, 1, 30deg);
        opacity: 0.5;
    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0.5;
    }
}
.swing_1 {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing_1;
    animation-name: swing_1
}
@-webkit-keyframes swing_2 {
    0%,50%,100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        opacity: 1;
    }
    25% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0.5;

    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, 30deg);
        transform: rotate3d(0, 0, 1, 30deg);
        opacity: 0.5;
    }
}
@keyframes swing_2 {
    0%,50%,100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        opacity: 1;
    }
    25% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        -ms-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0.5;

    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, 30deg);
        -ms-transform: rotate3d(0, 0, 1, 30deg);
        transform: rotate3d(0, 0, 1, 30deg);
        opacity: 0.5;
    }
}
.swing_2 {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing_2;
    animation-name: swing_2
}
/*定位图标左右晃动*/
@-webkit-keyframes swing_3 {
    0%,50%,100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        opacity: 1;
    }
    25% {
        -webkit-transform: rotate3d(0, 0, 1, 30deg);
        transform: rotate3d(0, 0, 1, 30deg);
        opacity: 0.5;

    }
    75% {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0.5;
    }
}
@keyframes swing_3 {
    0%,44%,100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        -ms-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);

    }
    22% {
        -webkit-transform: rotate3d(0, 0, 1, 30deg);
        -ms-transform: rotate3d(0, 0, 1, 30deg);
        transform: rotate3d(0, 0, 1, 30deg);

    }
    66% {
        -webkit-transform: rotate3d(0, 0, 1, -30deg);
        -ms-transform: rotate3d(0, 0, 1, -30deg);
        transform: rotate3d(0, 0, 1, -30deg);

    }
    91% {
        -webkit-transform: rotate3d(0, 0, 1, 8deg);
        -ms-transform: rotate3d(0, 0, 1, 8deg);
        transform: rotate3d(0, 0, 1, 8deg);

    }
    97% {
        -webkit-transform: rotate3d(0, 0, 1, -8deg);
        -ms-transform: rotate3d(0, 0, 1, -8deg);
        transform: rotate3d(0, 0, 1, -8deg);

    }
}
.swing_3 {
    -webkit-transform-origin:bottom  left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-animation-name: swing_3;
    animation-name: swing_3
}

/*loading，淡入淡出*/
@-webkit-keyframes fadeToggle {
    0% ,100%{  opacity: 0; }
     50%{opacity: 1;    }
}
@keyframes fadeToggle {
    0% ,100%{opacity: 0; }
    47%{opacity:0.6;}
    50% {opacity: 1; }
}
.fadeToggle {  -webkit-animation-name: fadeToggle;  animation-name: fadeToggle ; }

/*旋转*/
@-webkit-keyframes rotation {
    10%,100%,90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    50%,60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
}

@keyframes rotation {
    10%,100%,90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }

    50%,60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
}

#orientLayer {
    display: none;
    z-index: 999999
}
/*横屏时，提示*/
@media all and (orientation:landscape) {
    #orientLayer {
        display: block
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center
}

.mod-orient-layer__icon-orient {
    background-image: url();
    display: inline-block;
    width: 100px;
    height: 163px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    background-size: 100px;
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 20px;
    color: #fff
}